<template>
  <div class="box" v-show="eShow">
    <Row>
      <Col span="12" class="boxMain" style="height: 100%">
        <h2>退保情况</h2>
        <Table style="margin-top: 20px;" border :columns="columns1" :data="tbList"></Table>

        <div style="text-align: center; margin-top: 30px">
          <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" class="page_style" show-total  show-sizer @on-change="pageChange" @on-page-size-change="pageSize" />
        </div>
      </Col>
      <Col span="12" class="boxMain">
        <h2>致贫原因分析</h2>
        <div id="echartsZp" :style="{ width: width + 'px', height: height + 'px'}"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      split1: 0.5,
      eShow: true,
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      tbList: [
        { dq: '池城区', add: '1891,132/233', tb: '1891,132/233' },
        { dq: '大大区', add: '1621,132/233', tb: '1621,132/233' },
        { dq: '安州区', add: '1223,132/233', tb: '1223,132/233' },
        { dq: '小小区', add: '862,132/233', tb: '891,132/233' },
        { dq: '三台县', add: '612,132/233', tb: '612,132/233' },
        { dq: '池城区', add: '1891,132/233', tb: '1891,132/233' },
        { dq: '大大区', add: '1621,132/233', tb: '1621,132/233' },
        { dq: '安州区', add: '1223,132/233', tb: '1223,132/233' },
        { dq: '小小区', add: '862,132/233', tb: '891,132/233' },
        { dq: '三台县', add: '612,132/233', tb: '612,132/233' }
      ],
      columns1: [
        { title: '地区', key: 'dq', width: 250, align: 'center' },
        { title: '新增(人/户)', key: 'add', width: 250, align: 'center' },
        { title: '退保(人/户)', key: 'tb', width: 200, align: 'center' }
      ]
    }
  },
  mounted () {
    this.ecQd()
  },
  props: {
    width: {
      type: String,
      default: () => {
        return '100%'
      }
    },
    height: {
      type: Number,
      default: () => {
        return 580
      }
    }
  },
  methods: {
    pageSize (value) {
      this.currentPageSize = value
      this.pageChange()
    },
    pageChange (value) {
      this.currentPageNo = value
      // 接口
    },
    ecQd () {
      var chartDom = document.getElementById('echartsZp')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          data: ['因病', '支出', '因意外', '其他']
        },
        series: [
          {
            name: '窗口',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 50, name: '因病' },
              { value: 20, name: '支出' },
              { value: 15, name: '因意外' },
              { value: 10, name: '其他' }
            ]
          }
          // {
          //   name: '',
          //   z: -1,
          //   type: 'gauge',
          //   radius: '-50%',
          //   center: [`50%`, `50%`],
          //   // 配置中间的数字
          //   detail: {
          //     // 调节数字位置
          //     offsetCenter: [0, 20],
          //     fontSize: 30
          //   },
          //   pointer: {
          //     show: false
          //   },
          //   axisTick: {
          //     show: false
          //   },
          //   axisLine: {
          //     show: false
          //   },
          //   splitLine: {
          //     show: false
          //   },
          //   axisLabel: {
          //     show: false
          //   },
          //   // 中间的字和数字 数据
          //   data: [
          //     {
          //       value: 1430,
          //       name: '总件数'
          //     }
          //   ]
          // }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
 .box{
      width: 100%;
      height: 100%;
      background: #f5f5f5;
  }
  .box h2 {
    margin-bottom: 24px;
  }
  .box .btnN{
    width: 40px;
    height: 20px;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(to left, #FF515A, #FFDD53);
    color: #fff;
  }
  .eMain {
    display: flex;
  }
  .box .boxMain {
    width: 94%;
    height: 100%;
    background: #fff;
  }
  .ybCol {
    height: 290px;
    text-align: center;
  }
  .ybCol p {
    margin-bottom: 8px;
  }
</style>
